<template>
    <div class="swiper-size">
        <swiper :options="swiperOptions" class="swiper-blocks">
            <swiper-slide class="swiper-slide" v-for="(slide,index) in bannerImg" :key="index">
                <img class="swiperimg" :src=slide alt="index">
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
            <div class="swiper-button-prev" slot="button-prev"></div>
            <div class="swiper-button-next" slot="button-next"></div>
        </swiper>
    </div>
</template>

<script>
import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper';
import 'swiper/css/swiper.css';
import {indexImg} from "../assets/api/indexApi";

    export default {
        data(){
            return{
                swiperOptions:{
                    pagination:{
                        el: '.swiper-pagination',
                        type: ''
                    },
                    autoplay: true,
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    },
                    observer: true,
                    observeParents: true,
                    loop: true
                },
                bannerImg:[

                ],
            }
        },
        components: {
            Swiper,SwiperSlide
        },
        directives:{
            swiper:directive
        },
        methods:{
          findIndex(){
              indexImg(this.data).then((res) => {
                  this.bannerImg = res.data.data;
              });
          },
        },
        created() {
            this.findIndex();
        }
    }
</script>

<style scoped>
    *{
        background-color: #f4f4f4;
    }
.swiperimg{
    width: 700px;
    height: 400px;
    overflow: hidden;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
    .swiper-size{
        margin-top: 50px;
        font-size: 20px;
        text-align: center;
    }
    .swiper-blocks{
        display: inline-block;
        width: 100%;
    }

    .swiper-button-prev, .swiper-button-next{
        position: absolute;
        top: 50%;
        z-index: 10;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 250px;
        margin-right: 250px;
    }

</style>
